<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Remote Shell</title>
    <link rel="stylesheet" href="../css/xterm2.css" />
    <link rel="stylesheet" href="../js/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <style>
        /*body{position: relative;background-color: #000}*/
        html{height: 100%;}
        body{height: 100%;background: #000;overflow: hidden;}
        .bg-dark{color: #FFF}
        #load .modal-content{background: #000;color: #FFF}
        .tools{
            position: absolute;
            top: 20px;
            right: 30px;
            z-index:100;
            width: 300px;
            padding: 20px;
            /*backdrop-filter: blur(5px);*/
            background-color: rgba(255, 255, 255, 0.1);
        }
        .tools{font-size: 12px;color: rgb(197,197,197)}
        .tool-list > div:hover{color:rgb(60,126,255)}
        .tool-title{font-size: 16px;color: rgba(255,255,255,0.9);}
        .iconfont{    font-size: 16px;}
        .tool-item{cursor: pointer;
            display: inline-block;
            width: 42px;
            height: 42px;
            margin-bottom: 4px;
            line-height: 42px;
            border-radius: 4px;
            background-color: #000;}
        #shortcut{overflow-y: scroll;height: 300px}
        /* 整个滚动条 */
        /*::-webkit-scrollbar {width : 10px;}
        !* 滚动条里面滑块 *!
        ::-webkit-scrollbar-thumb {border-radius: 10px;background: #eee;}
        !*滚动条里面轨道*!
        ::-webkit-scrollbar-track {border-radius: 10px;box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);background: #000;}*/

        ::-webkit-scrollbar {width : 7px;}
        /*!* 滚动条里面滑块 *!*/
        ::-webkit-scrollbar-thumb {border-radius: 7px;background: #3f3f3f;}
        /*!*滚动条里面轨道*!*/
        ::-webkit-scrollbar-track {border-radius: 7px;box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);background: #000;}
    </style>
</head>
<body><!-- 对话框 -->
<!-- 使用自带的aria-labelledby事件按钮会冲突 -->
<div class="modal fade" id="stationModel" tabindex="-1"  data-backdrop="static" data-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content bg-dark">
            <div class="modal-header">
                <h5 class="modal-title">连接列表</h5>
            </div>
            <div class="modal-body">
                <button type="button" class="btn btn-primary my-2">新增连接</button>
                <table class="table table-hover table-dark">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">站点ID</th>
                        <th scope="col">站点名称</th>
                        <th scope="col">最近上线时间</th>
                        <th scope="col">连接状态</th>
                        <th scope="col">站点连接人数（同个站点同时只能10人连接）</th>
                    </tr>
                    </thead>
                    <tbody style="cursor: pointer;"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- 对话框 -->
<div class="modal fade" id="load" tabindex="-1" data-backdrop="static" data-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="text-center">
                <div class="spinner-border text-light" style="width: 3rem; height: 3rem;" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
                <div><span class="navbar-brand mb-0 h1">上传中...</span></div>
            </div>
        </div>
    </div>
</div>
<div id="terminal" style="width: 100%;height: 100%;"></div>
<div class="tools">
    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
        <button type="button" onclick="reload()" class="btn btn-secondary" title="刷新连接"><span class="iconfont icon-shuaxin"></span></button>
        <div class="btn-group" role="group"  title="切换编码">
            <button type="button" class="btn btn-secondary dropdown-toggle linux-encode" data-toggle="dropdown" aria-expanded="false">
                UTF-8
            </button>
            <div class="dropdown-menu">
                <div class="dropdown-item" onclick="setEncode('UTF-8')">UTF-8</div>
                <div class="dropdown-item" onclick="setEncode('GBK')">GBK</div>
            </div>
        </div>
        <a class="btn btn-secondary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            快捷键
        </a>
        <button type="button" onclick="logout()" class="btn btn-secondary">注销</button>
    </div>
    <div class="collapse" id="collapseExample">
        <div class="card card-body bg-dark">
            <ul class="list-group" id="shortcut">
            </ul>
        </div>
    </div>
</div>
<script src="../js/common.js"></script>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/xterm2.js" charset="utf-8"></script>
<script src="../js/xterm-addon-fit.js" charset="utf-8"></script>
<script src="../js/bootstrap/popper.min.js" charset="utf-8"></script>
<script src="../js/bootstrap/bootstrap.min.js" charset="utf-8"></script>
<script src="../js/websocket.js" charset="utf-8"></script>
<script src="../js/ssh.js?v=1" charset="utf-8"></script>
</body>
</html>